<template>
  <div class="app-container">

    <el-row :gutter="20">
      <el-col :span="24" style="margin-bottom: 10px;">
        <el-card>
          <div slot="header" class="clearfix">
            <span>工步集信息</span>
          </div>
          <el-descriptions size="medium" :column="4">
            <el-descriptions-item label="工步集名称">{{steps.stepsName}}</el-descriptions-item>
            <el-descriptions-item label="工步集编码">{{steps.stepsCode}}</el-descriptions-item>
            <el-descriptions-item label="应用产品"> {{steps.productCode}} </el-descriptions-item>
            <el-descriptions-item label="是否禁用">
              <el-tag type="success" size="small" v-if="steps.isDisable == '0'">{{ dict.label.is_disable[steps.isDisable] }}</el-tag>
              <el-tag type="info" size="small" v-if="steps.isDisable == '1'">{{ dict.label.is_disable[steps.isDisable] }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="版本"><span class="badge-content">{{steps.version}}</span></el-descriptions-item>
            <el-descriptions-item label="创建人"> {{steps.createBy}} </el-descriptions-item>
            <el-descriptions-item label="创建时间"> {{steps.createTime}} </el-descriptions-item>
            <el-descriptions-item label="更新人"> {{steps.updateBy}} </el-descriptions-item>
            <el-descriptions-item label="更新时间"> {{steps.updateTime}} </el-descriptions-item>
            <el-descriptions-item label="描述"> {{steps.remark}} </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>工步列表</span>
            <div style="float: right; height: 25px;"></div>
          </div>
          <!--工具栏-->
          <div class="head-container">
            <div v-if="crud.props.searchToggle">
              <el-select v-model="query.operationCode" clearable filterable
                         placeholder="工序编码" style="width: 185px;" class="filter-item" @change="crud.toQuery" >
                <el-option
                  v-for="item in operations"
                  :key="item.id"
                  :label="item.operationName"
                  :value="item.operationCode" >
                  <span style="float: left">{{ item.operationName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.operationCode }}</span>
                </el-option>
              </el-select>
              <el-input v-model="query.stepCode" clearable placeholder="工步编号" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
              <el-input v-model="query.stepName" clearable placeholder="工步名称" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
              <el-select v-model="query.stepType" clearable filterable
                         placeholder="工步类型" style="width: 185px;" class="filter-item" @change="crud.toQuery" >
                <el-option
                  v-for="item in dict.step_type"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value" />
              </el-select>
              <el-select v-model="query.isCheck" clearable filterable
                         placeholder="是否校验" style="width: 120px;" class="filter-item" @change="crud.toQuery" >
                <el-option
                  v-for="item in dict.whether"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value" />
              </el-select>
              <rrOperation :crud="crud" />
            </div>
            <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
            <crudOperation :permission="permission" />
            <!--表单组件-->
            <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="900px">
              <el-form :inline="true" ref="form" :model="form" :rules="rules" size="small" label-width="100px" @validate="validateFrom">
                <el-tabs v-model="activeName" tab-position="left">
                  <el-tab-pane label="基础数据" name="detail" style="padding: 0 20px">
                    <el-card shadow="never">
                      <el-form-item label="工序编码" prop="operationCode" >
                        <el-select v-model="form.operationCode" style="width: 555px" filterable placeholder="请选择">
                          <el-option
                            v-for="item in operations"
                            :key="item.id"
                            :label="item.operationName"
                            :value="item.operationCode" >
                            <span style="float: left">{{ item.operationName }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.operationCode }}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="工步顺序" prop="stepNo">
                        <el-input-number v-model="form.stepNo" :step="1" step-strictly style="width: 220px;"></el-input-number>
                      </el-form-item>
                      <el-form-item label="工步类型" prop="stepType" >
                        <el-select @change="stepTypeChange" v-model="form.stepType" filterable placeholder="请选择" style="width: 220px;" >
                          <el-option
                            v-for="item in dict.step_type"
                            :key="item.id"
                            :label="item.label"
                            :value="item.value" />
                        </el-select>
                      </el-form-item>

                      <el-form-item label="工步编号" prop="stepCode">
                        <el-input v-model="form.stepCode" style="width: 220px;" placeholder="请输入"/>
                      </el-form-item>
                      <el-form-item label="工步名称" prop="stepName">
                        <el-input v-model="form.stepName" style="width: 220px;" placeholder="请输入"/>
                      </el-form-item>

                      <el-form-item label="是否校验" prop="isCheck">
                        <el-radio-group v-model="form.isCheck">
                          <el-radio :label="item.value" v-for="item in dict.whether">{{item.label}}</el-radio>
                        </el-radio-group>
                      </el-form-item>

                      <el-form-item label="描述">
                        <el-input v-model="form.remark" :rows="3" type="textarea" style="width: 555px;" />
                      </el-form-item>
                    </el-card>

                    <el-card v-if="showMaterial"  shadow="never" style="margin-top: 20px">
                      <div v-if="showMaterial">
                        <el-form-item label="物料编码" prop="materialCode">
                          <el-select @change="materialChange" v-model="form.materialCode" style="width: 220px" filterable placeholder="请选择">
                            <el-option
                              v-for="item in materials"
                              :key="item.id"
                              :label="item.materialCode"
                              :value="item.materialCode" >
                              <span style="float: left">{{ item.materialName }}</span>
                              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.materialCode }}</span>
                            </el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="物料名称" prop="materialName">
                          <el-input :disabled="true" v-model="form.materialName" style="width: 220px;" />
                        </el-form-item>
                      </div>

                      <div v-if="showTighten">
                        <el-form-item label="拧紧程序号" prop="program">
                          <el-input v-model="form.program" style="width: 220px;" />
                        </el-form-item>
                        <el-form-item label="拧紧套筒号" prop="sleeve">
                          <el-input v-model="form.sleeve" style="width: 220px;" />
                        </el-form-item>
                        <el-form-item label="拧紧枪号" prop="tool">
                          <el-input v-model="form.tool" style="width: 220px;" />
                        </el-form-item>
                      </div>
                    </el-card>

                  </el-tab-pane>
                  <el-tab-pane label="工步指示" name="second" style="padding: 0 20px">
                    <el-card shadow="never" style="height: 400px;">

                      <el-upload
                        v-if="!form.craftStepImg.visitPath"
                        ref="uploadImg"
                        action="#"
                        list-type="picture-card"
                        :auto-upload="false"
                        :limit="1"
                        :on-change="beforeAvatarUpload"
                      >
                          <i slot="default" class="el-icon-plus"></i>
                          <div slot="file" slot-scope="{file}">
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" >
                            <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)" >
                              <i class="el-icon-zoom-in"></i>
                            </span>
                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)" >
                              <i class="el-icon-download"></i>
                            </span>
                            <span  v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)" >
                              <i class="el-icon-delete"></i>
                            </span>
                            </span>
                          </div>
                        </el-upload>


                      <ul v-if="form.craftStepImg.visitPath" class="el-upload-list el-upload-list--picture-card">
                        <li tabindex="0" class="el-upload-list__item is-ready">
                          <div>
                            <img :src="baseApi +'/' + form.craftStepImg.visitPath" alt="" class="el-upload-list__item-thumbnail">
                            <span class="el-upload-list__item-actions">
                              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview2(form.craftStepImg)">
                                <i class="el-icon-zoom-in"></i>
                              </span>
                              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload2(form.craftStepImg)">
                                <i class="el-icon-download"></i>
                              </span>
                              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove2(form.craftStepImg)">
                                <i class="el-icon-delete"></i>
                              </span>
                            </span>
                          </div>
                        </li>
                      </ul>
                    </el-card>
                  </el-tab-pane>

                  <el-tab-pane label="扫码规则" name="third" style="padding: 0 20px">

                    <el-card shadow="never" style="height: 400px;">
                      <el-empty v-if="materialLabel != '扫码'" description="当前工步不是扫码类型，不需要配置扫码规则"></el-empty>
                      <div v-if="materialLabel == '扫码'">
                        <el-form-item label="规则类型" prop="craftScanRule.ruleType">
                          <el-select v-model="form.craftScanRule.ruleType" filterable placeholder="请选择" style="width: 555px;">
                            <el-option
                              v-for="item in dict.scan_rule_type"
                              :key="item.id"
                              :label="item.label"
                              :value="item.value" />
                          </el-select>
                        </el-form-item>
                        <el-form-item label="规则内容" prop="craftScanRule.ruleContent">
                          <el-input v-model="form.craftScanRule.ruleContent" :rows="2" type="textarea" style="width: 555px;" />
                        </el-form-item>


                        <el-form-item label="全值匹配" prop="craftScanRule.upAllCheck" >
                          <el-radio-group v-model="form.craftScanRule.upAllCheck" style="width: 220px;">
                            <el-radio :label="item.value" v-for="item in dict.whether">{{item.label}}</el-radio>
                          </el-radio-group>
                        </el-form-item>

                        <el-form-item label="是否校验" prop="craftScanRule.isCheck">
                          <el-radio-group v-model="form.craftScanRule.isCheck" style="width: 220px;">
                            <el-radio :label="item.value" v-for="item in dict.whether">{{item.label}}</el-radio>
                          </el-radio-group>
                        </el-form-item>

                        <div v-if="form.craftScanRule.upAllCheck == '0'">
                          <el-form-item  label="开始位置" prop="craftScanRule.upBeginIndex">
                            <el-input-number v-model="form.craftScanRule.upBeginIndex" :step="1" step-strictly style="width: 220px;"></el-input-number>
                          </el-form-item>
                          <el-form-item label="截止位置" prop="craftScanRule.upEndIndex">
                            <el-input-number v-model="form.craftScanRule.upEndIndex" :step="1" step-strictly style="width: 220px;"></el-input-number>
                          </el-form-item>
                        </div>

                        <el-form-item label="条码长度" prop="craftScanRule.upLength">
                          <el-input-number v-model="form.craftScanRule.upLength" :step="1" step-strictly style="width: 220px;"></el-input-number>
                        </el-form-item>

                        <el-form-item label="描述">
                          <el-input v-model="form.craftScanRule.remark" :rows="3" type="textarea" style="width: 555px;" />
                        </el-form-item>
                      </div>

                    </el-card>
                  </el-tab-pane>
                </el-tabs>

              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button type="text" @click="crud.cancelCU">取消</el-button>
                <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
              </div>
            </el-dialog>

            <!--图片查看-->
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>

            <!--表格渲染-->
            <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
              <el-table-column type="selection" width="55" />
              <el-table-column prop="operationCode" label="工序编号" width="150px;" align="center"/>
              <el-table-column label="工序名称" width="200px;" align="center">
                <template slot-scope="scope">
                  {{ getOperationName(scope.row.operationCode) }}
                </template>
              </el-table-column>
              <el-table-column prop="stepCode" label="工步编号" width="150px;" align="center"/>
              <el-table-column prop="stepName" label="工步名称" width="200px;" align="center"/>
              <el-table-column prop="stepNo" label="工步顺序" width="80px;" align="center"/>
              <el-table-column prop="stepType" label="工步类型" width="100px;" align="center">
                <template slot-scope="scope">
                  {{ dict.label.step_type[scope.row.stepType] }}
                </template>
              </el-table-column>
              <el-table-column prop="isCheck" label="是否校验" width="100px;" align="center">
                <template slot-scope="scope">
                  {{ dict.label.whether[scope.row.isCheck] }}
                </template>
              </el-table-column>
              <!--<el-table-column prop="stepInstructions" label="工步指示" width="300px;" align="center"/>-->
              <el-table-column prop="materialCode" label="物料编码" width="200px;" align="center"/>
              <el-table-column prop="materialName" label="物料名称" width="200px;" align="center"/>
              <el-table-column prop="program" label="拧紧程序号" width="100px;" align="center"/>
              <el-table-column prop="sleeve" label="拧紧套筒号" width="100px;" align="center"/>
              <el-table-column prop="tool" label="拧紧枪号" width="100px;" align="center"/>
              <el-table-column prop="remark" label="描述" width="250px;" align="center" />
              <el-table-column prop="createBy" label="创建人" width="100px;" align="center"/>
              <el-table-column prop="createTime" label="创建时间" width="150px;" align="center"/>
              <el-table-column prop="updateBy" label="更新人" width="100px;" align="center"/>
              <el-table-column prop="updateTime" label="更新时间" width="150px;" align="center"/>
              <el-table-column v-if="checkPer(['admin','craftStepDetail:edit','craftStepDetail:del'])" fixed="right" label="操作" width="150px" align="center">
                <template slot-scope="scope">
                  <udOperation
                    :data="scope.row"
                    :permission="permission"
                  />
                </template>
              </el-table-column>
            </el-table>
            <!--分页组件-->
            <pagination />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import crudCraftStepDetail from '@/api/craft/craftStepDetail'
import crudCraftStepImg from '@/api/craft/craftStepImg'
import crudCraftScanRule from '@/api/craft/craftScanRule'
import crudProductMaterial from '@/api/product/productMaterial'
import crudCraftStep from '@/api/craft/craftStep'
import crudCraftOperationProduct from '@/api/craft/craftOperationProduct'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import { mapGetters } from 'vuex'
const stepImgForm = { id: null, stepId: null, serverPath: null, visitPath: null, originalFileName: null, fileName: null, suffix: null }
const scanRuleForm = { id: null, stepId: null, ruleType: null, upBeginIndex: null, upEndIndex: null, upLength: null, upAllCheck: '1', ruleContent: null, isCheck: '1', remark: null, createBy: null, createTime: null, updateBy: null, updateTime: null }
const defaultForm = { id: null, stepsId: null, stepNo: null, stepCode: null, stepName: null, stepType: null, stepInstructions: null, isCheck: '1', materialCode: null, materialName: null, program: null, sleeve: null, tool: null, remark: null, createBy: null, createTime: null, updateBy: null, updateTime: null , craftScanRule: scanRuleForm , craftStepImg: stepImgForm }
export default {
  name: 'CraftStepDetail',
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['step_type', 'whether', 'scan_rule_type' , 'is_disable'],
  computed: {
  ...mapGetters([
      'baseApi'
    ])
  },
  watch:{
    files(vaule){
      let uploadElement = document.getElementsByClassName('el-upload--picture-card')[0];
      if(uploadElement){
        if(vaule.size){
          uploadElement.classList.add("upload-hide");
        }else {
          uploadElement.classList.remove("upload-hide");
        }
      }
    }
  },
  cruds() {
    return CRUD({
      title: '工步详情',
      url: 'api/craftStepDetail',
      idField: 'id',
      sort: 'id,desc',
      optShow: {
        add: true,
        edit: true,
        del: true,
        download: false,
        reset: true,
        import: false
      },
      crudMethod: { ...crudCraftStepDetail }})
  },
  data() {
    return {
      activeName: 'detail',
      stepsId : 0,
      steps:{},
      showMaterial: false,
      showTighten: false,
      materialLabel:'',
      operations:[],
      materials:[],
      files:[],
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      permission: {
        add: ['admin', 'craftStepDetail:add'],
        edit: ['admin', 'craftStepDetail:edit'],
        del: ['admin', 'craftStepDetail:del']
      },
      rules: {
        operationCode:[
          { required: true, message: '工序编码不能为空', trigger: 'blur' }
        ],
        stepNo: [
          { required: true, message: '工步顺序不能为空', trigger: 'blur' }
        ],
        stepCode: [
          { required: true, message: '工步编号不能为空', trigger: 'blur' }
        ],
        stepName: [
          { required: true, message: '工步名称不能为空', trigger: 'blur' }
        ],
        stepType: [
          { required: true, message: '工步类型不能为空', trigger: 'blur' }
        ],
        isCheck: [
          { required: true, message: '是否校验不能为空', trigger: 'blur' }
        ],
        materialCode: [
          { required: true, message: '物料编码不能为空', trigger: 'blur' }
        ],
        materialName: [
          { required: true, message: '物料名称不能为空', trigger: 'blur' }
        ],
        program: [
          { required: true, message: '拧紧程序号不能为空', trigger: 'blur' }
        ],
        sleeve: [
          { required: true, message: '拧紧套筒号不能为空', trigger: 'blur' }
        ],
        tool: [
          { required: true, message: '拧紧枪号不能为空', trigger: 'blur' }
        ],
        'craftScanRule.ruleType': [
          { required: true, message: '规则类型不能为空', trigger: 'blur' }
        ],
        'craftScanRule.upBeginIndex': [
          { required: true, message: '上传条码开始位置不能为空', trigger: 'blur' }
        ],
        'craftScanRule.upEndIndex': [
          { required: true, message: '上传条码截止位置不能为空', trigger: 'blur' }
        ],
        'craftScanRule.upAllCheck': [
          { required: true, message: '是否全值匹配不能为空', trigger: 'blur' }
        ],
        'craftScanRule.ruleContent': [
          { required: true, message: '规则内容不能为空', trigger: 'blur' }
        ],
        'craftScanRule.isCheck': [
          { required: true, message: '是否校验不能为空', trigger: 'blur' }
        ],
        'craftScanRule.upLength': [
          { required: true, message: '条码长度不能为空', trigger: 'blur' }
        ]
      },
      queryTypeOptions: [
        { key: 'id', display_name: 'ID' },
        { key: 'stepsId', display_name: '工步集合ID' },
        { key: 'stepNo', display_name: '工步顺序' },
        { key: 'stepCode', display_name: '工步编号' },
        { key: 'stepName', display_name: '工步名称' },
        { key: 'stepType', display_name: '工步类型' },
        { key: 'stepInstructions', display_name: '工步指示' },
        { key: 'isCheck', display_name: '是否校验' },
        { key: 'materialCode', display_name: '物料编码' },
        { key: 'materialName', display_name: '物料名称' },
        { key: 'program', display_name: '拧紧程序号' },
        { key: 'sleeve', display_name: '拧紧套筒号' },
        { key: 'tool', display_name: '拧紧枪号' },
        { key: 'remark', display_name: '描述' },
        { key: 'createBy', display_name: '创建人' },
        { key: 'updateBy', display_name: '更新人' }
      ]
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      this.crud.params.stepsId = this.stepsId;
      return true
    },
    //新增之前
    [CRUD.HOOK.beforeToAdd](crud) {
      crud.form.stepsId = this.stepsId;
      return true
    },
    //编辑之前
    [CRUD.HOOK.beforeToEdit](crud) {

      //显示
      this.showForm(crud.form.stepType);

      //获取图片
      crudCraftStepImg.getByPid(crud.form.id).then(res =>{
        if(res){
          crud.form.craftStepImg = res;
        }
      })
      //获取规则
      crudCraftScanRule.getByPid(crud.form.id).then(res =>{
        if(res){
          crud.form.craftScanRule = res;
        }
      })
      return true
    },
    //新增取消
    [CRUD.HOOK.afterAddCancel](crud) {
      this.resetForm();
      return true
    },
    //编辑取消
    [CRUD.HOOK.afterEditCancel](crud) {
      this.resetForm();
      return true
    },
    //提交之前
    [CRUD.HOOK.beforeSubmit](crud) {
      let formData = new FormData()
      formData.append('file', this.files)
      formData.append('data', JSON.stringify(crud.form));
      if (crud.status.add === CRUD.STATUS.PREPARED) {
        this.doAdd(crud,formData);
      } else if (crud.status.edit === CRUD.STATUS.PREPARED) {
        this.doEdit(crud,formData)
      }
      return false;
    },
    //添加
    doAdd(crud,formData){
      crud.status.add = CRUD.STATUS.PROCESSING
      crudCraftStepDetail.add(formData).then(() => {
        crud.status.add = CRUD.STATUS.NORMAL
        this.resetForm();
        crud.resetForm();
        crud.addSuccessNotify();
        crud.toQuery();
      }).catch(() => {
        crud.status.add = CRUD.STATUS.PREPARED
      })
    },
    //修改
    doEdit(crud,formData){
      crud.status.edit = CRUD.STATUS.PROCESSING
      crudCraftStepDetail.edit(formData).then(() => {
        debugger
        crud.status.edit = CRUD.STATUS.NORMAL
        crud.getDataStatus(crud.getDataId(crud.form)).edit = CRUD.STATUS.NORMAL
        crud.editSuccessNotify()
        crud.resetForm()
        this.resetForm();
        crud.refresh()
      }).catch(() => {
        crud.status.edit = CRUD.STATUS.PREPARED
      })
    },
    //刷新
    resetForm(){
      this.files = [];
      if(this.$refs.uploadImg){
        this.$refs.uploadImg.clearFiles();
      }
      this.materialLabel = '';
      this.activeName = 'detail';
    },
    //表单提交校验
    validateFrom(field, result, msg){
      if(!result){
        if(field.indexOf('craftScanRule') != -1){
          if(this.activeName != 'third'){
            this.activeName = 'third';
          }
        }else{
          if(this.activeName != 'detail'){
            this.activeName = 'detail';
          }
        }
      }
    },
    //物料选择
    materialChange(value){
      this.materials.forEach(res =>{
        if(res.materialCode == value){
          this.crud.form.materialName = res.materialName;
          return;
        }
      })

    },
    //工步类型选择
    stepTypeChange(value){
      this.crud.form.materialName = null;
      this.crud.form.materialCode = null;
      this.crud.form.program = null;
      this.crud.form.sleeve = null;
      this.crud.form.tool = null;
      this.showForm(value);
    },
    showForm(value){
      if(value == '1' || value == '2'){
        //扫物料
        this.materialLabel = '扫码';
        this.showMaterial = true;
        this.showTighten = false;
      }else if(value == '3'){
        //拧紧
        this.materialLabel = '拧紧';
        this.showMaterial = true;
        this.showTighten = true;
      }else {
        if(value == '4'){
          this.materialLabel = '扫码';
        }else{
          this.materialLabel = '';
        }
        //其他操作
        this.showMaterial = false;
        this.showTighten = false;
      }
    },
    //加载页面
    queryPage(id){
      this.stepsId = id;
      this.crud.toQuery();
    },
    //初始化数据
    async initData(){

      //获取参数集数据
      await crudCraftStep.getById(this.stepsId).then(res =>{
        if(res){
          this.steps = res;
        }
      });

      //获取工序数据
      await crudCraftOperationProduct.getByProduct({productCode:this.steps.productCode}).then(res =>{
        if(res){
          this.operations = res;
        }
      })
      //获取物料
      crudProductMaterial.list().then(res =>{
        if(res){
          this.materials = res;
        }
      });
    },
    //根据工序编号获取工序名称
    getOperationName(operationCode){
      let name = '';
      this.operations.forEach(item =>{
        if(operationCode == item.operationCode){
          name = item.operationName;
          return;
        }
      });
      return name;
    },
    //新增的图片删除回调
    handleRemove(file) {
      this.files = [];
      this.$refs.uploadImg.clearFiles();
    },
    //新增的图片放大回调
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //新增的图片下载回调
    handleDownload(file) {
      debugger
      let a = document.createElement("a"); //创建一个a元素
      a.href = file.url;    //a元素图片地址
      a.download = file.name; //图片名
      a.click();
      console.log(file);
    },
    //编辑的图片删除回调
    handleRemove2(file) {
      this.form.craftStepImg.visitPath = '';
    },
    //编辑的图片放大回调
    handlePictureCardPreview2(file) {
      this.dialogImageUrl = this.baseApi +'/' + file.visitPath;
      this.dialogVisible = true;
    },
    //编辑的图片下载回调
    handleDownload2(file) {
      let a = document.createElement("a"); //创建一个a元素
      a.href = this.baseApi +'/' + file.visitPath;    //a元素图片地址
      debugger
      a.download = file.originalFileName; //图片名
      a.click();
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传的工步图片大小不能超过 2MB!');
        return  isLt2M;
      }
      this.files = file.raw;
      return  isLt2M;
    }
  },
  mounted() {
    const id = this.$route.params.id;
    this.queryPage(id);
    this.initData();
  }
}
</script>

<style type="text/css" >

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .upload-hide {
    display: none !important;
  }
</style>
